<template>
	<view class="container">
		<swiper class="swiper" circular>
			<swiper-item @click="toAffiliatePolicy">
				<image src="/static/banner_1.png" mode="widthFix" class="img"></image>
			</swiper-item>
			<swiper-item @click="toAffiliatePolicy">
				<image src="/static/banner_1.png" mode="widthFix" class="img"></image>
			</swiper-item>
			<swiper-item @click="toAffiliatePolicy">
				<image src="/static/banner_1.png" mode="widthFix" class="img"></image>
			</swiper-item>
		</swiper>
		<view class="location" @click="getLocation">
			<image src="/static/location.png" class="icon"></image>
			<view>我的位置：<text>{{location}}</text></view>
		</view>
		
		<view class="shops">
			<view class="shop" v-for="(item,index) in shopsList" :key="index" @click="toShop(item)">
				<view class="left">
					<image :src="item.avatar" mode="widthFix" class="img"></image>
				</view>
				
				<view class="right">
					<view class="name">
						{{item.shopname}}
					</view>
					<view class="address">
						地址：{{item.address}}
					</view>
				</view>
				<view class="distance">
					{{item.distance}}
				</view>
			</view>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
		
		<uni-popup ref="popup">
			<view class="gift_popup">
				<image src="/static/subgift.png" mode="widthFix"></image>
				<button class="gift_btn" @click="subgiftConfirm">好的，我收下</button>
			</view>
		</uni-popup>
		
		<m-tabbar fixed fill current="0" :tabbar="tabbar">
			<template v-slot:tabbar_index_1>
				<view class="custom_style" @tap="sancodeClick">
					<image src="../../static/sancode.png" style="width:78rpx;height: 78rpx;" mode="widthFix"></image>
				</view>
			</template>
		</m-tabbar>
		<scancodeCom ref="sancode" />
	</view>
</template>

<script>
	import {takePosition,shopList,subgift} from '../../api/api.js'
	import TabbarConfig from '@/config/tabbar.js'
	import scancodeCom from './scancodeCom/scancodeCom.vue'
	export default {
		data() {
			return {
				location: '未获取到位置',
				shopsList:[],
				tabbar: TabbarConfig,
				page:1,
				status:'more',
				statusTypes: [{
					value: 'more',
					text: '加载前',
					checked: true
				}, {
					value: 'loading',
					text: '加载中',
					checked: false
				}, {
					value: 'noMore',
					text: '没有更多',
					checked: false
				}],
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},
		onLoad() {
			this.getLocation()
			// this.takePosition(34.759197,116.481499)
			this.getShopList()
			let shareOrderId = uni.getStorageSync("shareOrderId")
			if(shareOrderId && shareOrderId != ''){
				this.$refs.popup.open('center')
			}
		},
		onReachBottom(){  //上拉触底函数
			if(this.status == 'more'){  //此处判断，上锁，防止重复请求
				this.page +=1
				this.getShopList()
			}
		},
		components:{scancodeCom},
		methods: {
			getLocation(){
				console.log(111)
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.takePosition(res.latitude,res.longitude)
					}
				});
			},
			takePosition(lat,lgt){
				takePosition({lat,lgt}).then(res=>{
					console.log(res)
					this.location = res.data.data
				})
			},
			toAffiliatePolicy(){
				uni.navigateTo({url:'/pages/shop/affiliatePolicy/affiliatePolicy?title=轻医美项目加盟政策'})
			},
			getShopList(){
				shopList({page:this.page}).then(res=>{
					console.log(res)
					this.shopsList.push(...res.data.data.data)
					if(this.shopsList.length >= res.data.data.total){
						this.status = 'noMore'
					}else {
						this.status = 'more'
					}
				})
			},
			toShop(shop){
				console.log('toShop')
				uni.navigateTo({url:'/pages/shop/shopSetMeal?shopId='+shop.id+'&shopName='+shop.shopname +'&avatar='+shop.avatar })
			},
			sancodeClick(){
				this.$refs.sancode.sancode()
			},
			subgiftConfirm(){
				let shareOrderId = uni.getStorageSync("shareOrderId")
				//确认领取后移除
				uni.removeStorageSync("shareOrderId")
				subgift({service_id:shareOrderId}).then(res=>{
					uni.navigateTo({url:'/pages/my/myServices/myServices'})
				}).catch(e=>{}).then(()=>{
					this.$refs.popup.close()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	}
.swiper {
	width: 750rpx;
	height: 360rpx;
	.img {
		width: 100vw;
		height: 100%;
	}
}
.location {
	width: 100%;
	height: 86rpx;
	line-height: 38rpx;
	padding-left: 24rpx;
	font-size: 30rpx;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #EEEEEE;
	.icon {
		width: 32rpx;
		height: 38rpx;
		margin-right: 12rpx;
	}
}
.shops {
	width: 100%;
	.shop {
		width: 100%;
		height: 240rpx;
		padding: 30rpx;
		display: flex;
		position: relative;
		border-bottom: 1px solid #EEEEEE;
		.left {
			width: 180rpx;
			height: 180rpx;
			display: flex;
			align-items: center;
			.img {
				width: 180rpx;
				height: 100%;
			}
		}
		.right {
			padding: 5rpx 24rpx;
			.name {
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 42rpx;
				font-size: 30rpx;
			}
			.address {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 36rpx;
			}
		}
		.distance {
			position: absolute;
			right: 24rpx;
			bottom: 30rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999990;
			line-height: 36rpx;
		}
	}
	
}
.gift_popup{
		width: 100vw;
		padding: 0 96rpx;
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
	.gift_btn{
		margin-top: 64rpx;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		width: 334rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: linear-gradient(270deg, #FE2E27 0%, #FE877F 100%);
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}
</style>
